<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">车辆管理</b> 用于管理小区里的车辆信息，包括业主、家庭成员及租户的车辆</p>
    <el-card class="box-card" style="margin-bottom: 20px;">
      <!-- 搜索区域 -->
      <el-form label-width="80px" :inline="true"  label-position="top">
        <el-form-item label="小区名称">
          <el-select v-model="queryData.community_code">
            <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位信息">
          <el-input v-model="queryData.name"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <DataSelect v-model="queryData.update_time" ref="datePick" />
        </el-form-item>
        <el-form-item>
          <div style="margin-top: 30px;margin-left: 40px;">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
      <el-card>
      <!-- 工具区域 -->
      <el-row type="flex" justify="space-between">
        <div></div>
        <div>
          <el-button type="primary" style="margin-right: 5px;" @click="addRef.isShow = true">添加信息</el-button>
          <el-icon style="margin-right: 5px;">
            <RefreshRight />
          </el-icon>
          <el-icon style="margin-right: 5px;">
            <Share />
          </el-icon>
          <el-icon>
            <Tools />
          </el-icon>
        </div>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table border style="width: 100%" :data="list">
        <el-table-column label="ID">
          <template #default="{ row }">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column label="小区名称">
          <template #default="{ row }">
            {{ row.community.name }}
          </template>
        </el-table-column>
        <el-table-column label="车位名称">
          <template #default="{ row }">
            {{ row.name }}
          </template>
        </el-table-column>
        <el-table-column label="车位编码">
          <template #default="{ row }">
            {{ row.community_code }}
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="{ row }">
            {{ row.remark }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button @click="editRow(row.id)" type="text">修改</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table><br>
      <!-- 分页区域 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" v-model:current-page="queryData.current"
         v-model:page-size="queryData.pageSize" layout="total, prev, pager, next"
        :total="total" background>
      </el-pagination>
      <addForm ref="addRef" @updateList="initData" />
    </el-card>
    <p class="foot">Element UI黑马前端合肥前端欢迎您
    <p>@2023 地表最强集团</p>
    </p>
  </div>
</template>
  
<script setup>
import { onMounted, reactive, ref } from "vue";
import DataSelect from '@/components/Select/index.vue';
import { useCommunityAllList } from "@/hooks/hooks.js";
import { ElMessage } from "element-plus";
import addForm from "./addParking";
// 小区列表
const cateList = useCommunityAllList();

// 添加
const addRef = ref();

const datePick = ref()

import { getParking, delParkingApi } from '@/api/parking/index.js'
const queryData = reactive({
  current: 1,
  pageSize: 3,
  create_time: '',
  name: '',
  update_time: '',
  community_code: ''
});

// 每页数量切换
const sizeChange = (val) => {
  queryData.pageSize = val;
  initData();
};
// 页码切换
const currentChange = (val) => {
  queryData.current = val;
  initData();
};

// 搜索确定
const onSearch = () => {
  queryData.current = 1;
  initData();
};
// 搜索取消
const onReset = () => {
  Object.assign(queryData, {
    current: 1,
    pageSize: 10,
    create_time: '',
    name: '',
    update_time: '',
    community_code: ''
  });
  datePick.value.time = []
  initData();
};
const total = ref(0);
const list = ref([]);
const initData = async () => {
  let { data } = await getParking(queryData);
  list.value = data.rows;
  total.value = data.count;
  console.log(data);
};
onMounted(() => {
  initData();
});

// 修改功能
const editRow = (id) => {
  addRef.value.replyData(id);
};
// 删除功能
const delRow = async (id) => {
  await delParkingApi(id);
  ElMessage.success("删除成功");
  if (queryData.pageNum > 1 && list.value.length === 1) queryData.pageNum--;
  initData();
};
</script>
<style scoped>
.header {
  position: absolute;
  top: 15px;
  left: 80px;
  display: flex;
  align-items: center;
}

.tille {
  font-weight: 700;
  font-size: 20px;
}

.foot {
  text-align: center;
  font-size: 14px;
}
</style>